<template>
   <div class="main">
          <ul class="infinite-list scroll" ref="scroll" v-infinite-scroll="load" infinite-scroll-immediate :style="'overflow:auto'">
                <li  v-for="(item,index) in warehouse_data" :key="index" class="infinite-list-item" :class="nowWarehouse===index?'activeLi':''" @click="warehouseTap(index)">{{ item.name }}</li>
          </ul>

   </div>
</template>

<script>
export default {
  props: {
    warehouse_data: {
      type: Array,
      default: () => {
        return []
      }
    },
    nowWarehouse: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      count: 25

    }
  },
  computed: {
    top () {
      return -this.active * 48 + 'px'
    }
  },
  created () {
    // setInterval(() => {
    //   console.log(111)
    //   this.timer()
    // }, 3000)
  },
  methods: {
    warehouseTap (index) {
      this.$emit('queryWarehouse', index)
    },
    load () {
    //   this.count += 2
    },
    timer () {
      if (this.active < this.count) {
        this.active = this.active + 1
      } else {
        this.active = 0
      }
      // console.log('页面滚动----')
      this.$refs.scroll.scrollTo(this.active * 48, 48)
      this.$nextTick(() => {
        // this.$refs.scroll.scrollTo(this.active * 48, 48)
        // document.documentElement.scrollTop = 48
      })
    }
  }
}
</script>

<style scoped>
.infinite-list{
    width: 100%;
    height: 80vh;
    margin: 0;
    padding: 0 !important;
    /* position: relative; */
}
  ul>li{
      list-style: none;
      width:96%;
      height:39px;
      padding: 0 2%;
      line-height: 39px;
      color: white;
      text-align: center;
      margin-bottom: 9px;
      font-size: 12px;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
      background: url('../../../../static/images/libk.png') no-repeat;
      /* background-size: 100%; */
  }
  .activeLi{
     background: url('../../../../static/images/libk_active.png') no-repeat;
  }

 .infinite-list::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

.infinite-list::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
         /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
        /* background: #04C0E2FF; */
        background: none;
    }

.infinite-list::-webkit-scrollbar-track {/*滚动条里面轨道*/
        /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
        border-radius: 10px;
        /* background: rgba(6, 7, 107, 0.59); */
         background: none;

}
</style>
